<template>
  <div>
    <el-button type="primary" @click="handleAdd">新增</el-button>
    <!-- 添加搜索框和按钮 -->
    <el-input
      v-model="searchKeyword"
      placeholder="请输入关键词"
      style="width: 200px; margin-left: 20px;"
    >
      <template slot="append">
        <el-button @click="handleSearch">搜索</el-button>
      </template>
    </el-input>
    <el-table :data="filteredTableData" style="width: 80%" class="center-table">
      <el-table-column prop="id" label="ID"></el-table-column>
      <el-table-column prop="title" label="名称"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleUpdate(scope.row)">更新</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 新增表单对话框 -->
    <el-dialog :visible.sync="dialogVisible" title="新增小说">
      <el-form :model="addForm" label-width="80px">
        <el-form-item label="链接">
          <el-input v-model="addForm.title"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitAddForm">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { id: 1, title: '项目1' },
        { id: 2, title: '项目2' },
      ],
      searchKeyword: '', // 搜索关键词
      filteredTableData: [], // 过滤后的表格数据
      dialogVisible: false, // 对话框是否显示
      addForm: {
        title: '' // 新增表单数据
      }
    };
  },
  mounted() {
    this.init()
    
  },
  methods: {
    init(){
      this.axios.get('/admin/novel/list').then(res => {
        this.tableData = res.data.data; // 假设接口返回的数据在 res.data 中 
        this.filteredTableData = this.tableData; // 初始化过滤数据
        console.log(this.filteredTableData)
      }).catch(error => {
        console.error('Error fetching data:', error);
      });
    },
    handleAdd() {
      this.dialogVisible = true; // 显示对话框
    },
    submitAddForm() {
      // 显示加载提示
      const loading = this.$loading({
        lock: true,
        text: '提交中，请稍候...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });

      // 发送新增请求
      this.axios.post('/admin/novel/add', this.addForm).then(res => {
        // 关闭加载提示
        loading.close();
        // 关闭对话框
        this.dialogVisible = false;
        // 清空表单
        this.addForm = { title: '' };
        // 给用户新增成功的反馈
        this.$message({
          type: 'success',
          message: '新增成功'
        });
        // 重新获取列表数据
        this.init();
      }).catch(error => {
        // 关闭加载提示
        loading.close();
        // 给用户新增失败的反馈
        this.$message({
          type: 'error',
          message: '新增失败，请稍后重试'
        });
        console.error('新增数据时出错:', error);
      });
    },
    handleUpdate(row) {
      // 显示更新中的提示
      const loading = this.$loading({
        lock: true,
        text: '更新中，请稍候...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      this.axios.get('/admin/novel/update/'+row.id).then(res => {
        // 关闭加载提示
        loading.close();
        // 给用户更新成功的反馈
        this.$message({
          type: 'success',
          message: '更新成功'
        });
        this.init()
        // 可以在这里添加数据刷新逻辑，比如重新获取列表数据
        // this.created();
      }).catch(error => {
        // 关闭加载提示
        loading.close();
        // 给用户更新失败的反馈
        this.$message({
          type: 'error',
          message: '更新失败，请稍后重试'
        });
        console.error('更新数据时出错:', error);
      });
    },
    handleDelete(row) {
      // 这里添加删除逻辑
      console.log('删除', row);
      const loading = this.$loading({
        lock: true,
        text: '删除中，请稍候...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      this.axios.delete('/admin/novel/delete/'+row.id).then(res => {
        // 关闭加载提示
        loading.close();
        // 给用户更新成功的反馈
        this.$message({
          type: 'success',
          message: '删除成功'
        });
        this.init()
        // 可以在这里添加数据刷新逻辑，比如重新获取列表数据
        // this.created();
      }).catch(error => {
        // 关闭加载提示
        loading.close();
        // 给用户更新失败的反馈
        this.$message({
          type: 'error',
          message: '删除失败，请稍后重试'
        });
        console.error('删除数据时出错:', error);
      });
    },
    handleSearch() {
      if (this.searchKeyword === '') {
        this.filteredTableData = this.tableData;
      } else {
        this.filteredTableData = this.tableData.filter(item => {
          return item.title.includes(this.searchKeyword);
        });
      }
    }
  },
};
</script>

<style scoped>
.center-table {
  margin: 0 auto;
}
</style>